<template>
  <view class="container">
    <pap-navbar title="首页" bgColor="transparent" titleColor="white" />
    <view class="grow min-h-0 flex flex-col">
      <view class="section-title"> 快捷入口 </view>
      <view class="navigation-list">
        <view
          class="navigation-list-item"
          v-for="(item, index) in navList"
          :key="index"
          @click="pageJump(item)"
        >
          <view class="navigation-list-image">
            <u--image
              width="42rpx"
              height="42rpx"
              :showLoading="true"
              :src="defaultIcon"
            ></u--image>
          </view>
          <text>{{ item.text }}</text>
        </view>
      </view>
      <view class="grow min-h-0 flex flex-col card-box">
        <view class="section-title"> 我的待办 </view>
        <view class="flex card-tab">
          <view class="card-tab-item bgC-f3f3ff"> 待办事项 </view>
          <view class="card-tab-item bgC-fff1e7"> 进行中事项 </view>
          <view class="card-tab-item bgC-e9fef7"> 已完成事项 </view>
        </view>
        <scroll-view scroll-y="true" class="grow min-h-0">
          <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
          <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
          <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
        </scroll-view>
      </view>
    </view>
    <pap-tabbar tabIndex="0" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultIcon: '/static/images/navigation.png',
      navList: [
        {
          icon: this.defaultIcon,
          text: '水泥拌合站',
          url: '/subPages/mixing-plant/list/index?equipmentType=cement_concrete_mixer'
        },
        {
          icon: this.defaultIcon,
          text: '沥青拌合站',
          url: '/subPages/mixing-plant/list/index?equipmentType=asphalt_mixture_mixer'
        },
        {
          icon: this.defaultIcon,
          text: '水稳拌合站',
          url: '/subPages/mixing-plant/list/index?equipmentType=cement_stabilized_soil_mixer'
        },
        {
          icon: this.defaultIcon,
          text: 'xxx'
        },
        {
          icon: this.defaultIcon,
          text: 'xxx'
        },
        {
          icon: this.defaultIcon,
          text: 'xxx'
        },
        {
          icon: this.defaultIcon,
          text: 'xx'
        },
        {
          icon: this.defaultIcon,
          text: '更多'
        }
      ]
    }
  },
  onLoad() {},
  methods: {
    pageJump(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bgC-f3f3ff {
  background: #f3f3ff;
}

.bgC-fff1e7 {
  background: #fff1e7;
}

.bgC-e9fef7 {
  background: #e9fef7;
}

.container {
  &::after {
    content: '';
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 742rpx;
    background: linear-gradient(270deg, #3a46ef 0%, #4771fd 100%);
  }

  .section-title {
    margin: 0 0 40rpx;
    padding: 0 48rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: white;
  }

  .navigation-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48rpx;
    padding: 0 48rpx;

    .navigation-list-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;

      .navigation-list-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 96rpx;
        margin: 0 0 16rpx;
        background-color: white;
        border-radius: 50%;
      }

      text {
        // font-size: 32rpx;
        font-size: 26rpx;
        font-weight: 400;
      }
    }
  }

  .card-box {
    margin: 56rpx 0 0;
    padding: 40rpx 48rpx;
    border-radius: 24rpx 24rpx 0 0;
    background-color: white;

    .section-title {
      margin: 0 0 24rpx;
      padding: 0;
      color: #34383f;
    }

    .card-tab {
      gap: 0 16rpx;

      .card-tab-item {
        display: flex;
        align-items: flex-end;
        width: 208rpx;
        height: 112rpx;
        padding: 0 16rpx 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #4e5969;
        border-radius: 12rpx;
      }
    }
  }
}
</style>
